<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app1">
        rootName:<span data-bind="text:name" ></span>
    </div>
    <div id="app2"> 
        treeNode:
        <span data-bind="text:name"></span>
        &nbsp;rootName
        <span data-bind="text:full"></span>
        <button type="button" data-bind="click:changeName" >换名</button>
    </div>
    
    <script type="text/javascript" src="./knockout-latest.debug.js" ></script>
    <script type="text/javascript" src="./flux.js"></script>
    <script>


        function rootViewModel(){
            this.name = ko.observable('root'); 
        }
        var rVM = new rootViewModel();
        flux.createStore({ state: rVM}); //创建root状态器
        

        var treeNode={
            name: ko.observable('node'),
            changeName:function(){
                ko.$store.areas.treeNode.state.name('新名字');
            },
            full: ko.computed(function(){
                //computed的职责：1. 监控其他对象属性的变化，而影响自身对象（flux解决）；2. 合并自身对象的几个属性（在function下，有this可解）
                //不能通过ko.$store访问对象本身，因为首次对象本身还没初始化好
                var store = ko.$store;
                //(store.areas.treeNode? store.areas.treeNode.state.name() : '')  这样也是不行，因为解决第一次通不过，后面肯定不行
                return store.state.name();
            })
        }


        ko.$store.register('treeNode', flux.createStore({ state: treeNode})); //创建子状态机
        
        var app1 = ko.applyBindings(rVM, document.getElementById("app1"));
        var app2 = ko.applyBindings(treeNode, document.getElementById("app2"));

    </script>
</body>
</html>